<?php
/**
 * 博客首页文件 - 文章列表页面
 * 这个页面是博客系统的主页，用于显示所有已发布的文章列表
 * 包含文章摘要、分类标签、分页功能等
 * 支持已登录和未登录用户访问
 */

// 引入系统初始化文件，包含所有必要的类和函数
require_once 'includes/init.php';

// 从URL参数获取当前页码，用于分页功能
$page = getGet('page', 1);
// 确保页码至少为1，防止无效页码
$page = max(1, (int)$page);

// 获取当前页的文章列表
// $blog->getArticles()方法会根据页码返回对应的文章数据
$articles = $blog->getArticles($page);

// 获取文章总数，用于计算分页
$totalArticles = $blog->getArticleCount();

// 计算总页数
// $blog->getConfig('posts_per_page')获取每页显示的文章数量配置
// 使用ceil向上取整，确保最后一页也能显示
$totalPages = ceil($totalArticles / $blog->getConfig('posts_per_page'));
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客系统</title>
    <link rel="stylesheet" href="assets/css/blog.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background: #fff;
            padding: 20px 0;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 28px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .nav {
            display: flex;
            gap: 20px;
        }
        
        .nav a {
            text-decoration: none;
            color: #333;
            padding: 10px 15px;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        
        .nav a:hover {
            background-color: #3498db;
            color: white;
        }
        
        .main-content {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
        }
        
        .articles {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .article-item {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
            transition: all 0.3s ease;
            margin-bottom: 30px;
            display: flex;
            min-height: 180px;
            position: relative;
        }
        
        .article-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .article-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }
        
        .article-image {
            width: 200px;
            height: 180px;
            background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 48px;
            flex-shrink: 0;
        }
        
        .article-content {
            flex: 1;
            padding: 25px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .article-title {
            font-size: 22px;
            margin-bottom: 10px;
        }
        
        .article-title a {
            text-decoration: none;
            color: #2c3e50;
        }
        
        .article-title a:hover {
            color: #3498db;
        }
        
        .article-meta {
            color: #666;
            font-size: 14px;
            margin-bottom: 15px;
        }
        
        .article-excerpt {
            color: #555;
            line-height: 1.8;
            margin-bottom: 15px;
        }
        
        .article-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 10px;
        }
        
        .tag {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            box-shadow: 0 2px 4px rgba(240, 147, 251, 0.3);
            transition: all 0.3s ease;
        }
        
        .tag:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(240, 147, 251, 0.4);
        }
        
        .category {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
            transition: all 0.3s ease;
        }
        
        .category:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
        }
        
        .article-stats {
            color: #999;
            font-size: 13px;
            display: flex;
            gap: 15px;
        }
        
        .top-badge, .recommend-badge {
            background: #e74c3c;
            color: white;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
            margin-left: 10px;
        }
        
        .recommend-badge {
            background: #f39c12;
        }
        
        .sidebar {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
            height: fit-content;
            position: relative;
            overflow: hidden;
        }
        
        .sidebar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        
        .sidebar h3 {
            margin-bottom: 20px;
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        
        .user-info {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .user-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .btn {
            background: #3498db;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            text-align: center;
            transition: background-color 0.3s;
            border: none;
            cursor: pointer;
        }


        
        .btn:hover {
            background: #2980b9;
        }
        
        .btn-secondary {
            background: #95a5a6;
        }
        
        .btn-secondary:hover {
            background: #7f8c8d;
        }
        
        .pagination {
            text-align: center;
            margin-top: 30px;
        }
        
        .pagination a {
            display: inline-block;
            padding: 10px 15px;
            margin: 0 5px;
            background: white;
            color: #333;
            text-decoration: none;
            border-radius: 5px;
            border: 1px solid #ddd;
        }
        
        .pagination a:hover, .pagination .current {
            background: #3498db;
            color: white;
            border-color: #3498db;
        }
        
        .stats {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            text-align: center;
        }
        
        .stats-item {
            background: white;
            padding: 15px;
            border-radius: 5px;
        }
        
        .stats-number {
            font-size: 24px;
            font-weight: bold;
            color: #3498db;
        }
        
        .stats-label {
            color: #666;
            font-size: 14px;
        }
        h2{
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">我的博客系统</div>
                <nav class="nav">
                    <a href="index.php">首页</a>
                    <?php if (isLoggedIn()): ?>
                        <a href="admin/index.php">管理后台</a>
                        <a href="admin/post.php">发布文章</a>
                        <a href="logout.php">退出登录</a>
                    <?php else: ?>
                        <a href="login.php">登录</a>
                        <a href="register.php">注册</a>
                    <?php endif; ?>
                </nav>
            </div>
        </div>
    </header>

    <div class="container">
        <div class="main-content">
            <main class="articles">
                <h2>最新文章</h2>
                
                <?php if (empty($articles)): ?>
                    <div style="text-align: center; padding: 50px; color: #666;">
                        <h3>暂无文章</h3>
                        <p>还没有发布任何文章，快去发布第一篇文章吧！</p>
                        <?php if (isLoggedIn()): ?>
                            <a href="admin/post.php" class="btn" style="margin-top: 20px;">发布文章</a>
                        <?php endif; ?>
                    </div>
                <?php else: ?>
                    <?php foreach ($articles as $article): ?>
                        <article class="article-item">
                            <div class="article-image">
                                <?php if (!empty($article['图片'])): ?>
                                    <img src="<?php echo escape($article['图片']); ?>" alt="<?php echo escape($article['标题']); ?>" style="width: 100%; height: 100%; object-fit: cover;">
                                <?php else: ?>
                                    <?php echo getArticleImage($article['id']); ?>
                                <?php endif; ?>
                            </div>
                            <div class="article-content">
                                <h3 class="article-title">
                                    <a href="article.php?id=<?php echo $article['id']; ?>">
                                        <?php echo escape($article['标题']); ?>
                                    </a>
                                    <?php if ($article['是否置顶']): ?>
                                        <span class="top-badge">置顶</span>
                                    <?php endif; ?>
                                    <?php if ($article['是否推荐']): ?>
                                        <span class="recommend-badge">推荐</span>
                                    <?php endif; ?>
                                </h3>
                                
                                <div class="article-meta">
                                    作者：<?php echo escape($article['用户名']); ?> | 
                                    发布时间：<?php echo formatDate($article['创建时间']); ?>
                                </div>
                                
                                <div class="article-tags">
                                    <?php
                                    // 获取文章分类和标签
                                    $categories = getArticleCategories($article['id']);
                                    $tags = getArticleTags($article['id']);
                                    
                                    // 显示分类
                                    foreach ($categories as $category) {
                                        echo '<span class="category">' . escape($category['分类名']) . '</span>';
                                    }
                                    
                                    // 显示标签
                                    foreach ($tags as $tag) {
                                        echo '<span class="tag">' . escape($tag['标签名']) . '</span>';
                                    }
                                    ?>
                                </div>
                                
                                <div class="article-excerpt">
                                    <?php echo escape(getExcerpt($article['内容'], 200)); ?>
                                </div>
                                
                                <div class="article-stats">
                                    <span>阅读：<?php echo $article['阅读量']; ?></span>
                                    <span>点赞：<?php echo $article['点赞量']; ?></span>
                                    <span>评论：<?php echo $article['评论量']; ?></span>
                                </div>
                            </div>
                        </article>
                    <?php endforeach; ?>
                    
                    <!-- 分页 -->
                    <?php if ($totalPages > 1): ?>
                        <div class="pagination">
                            <?php if ($page > 1): ?>
                                <a href="?page=<?php echo $page - 1; ?>">上一页</a>
                            <?php endif; ?>
                            
                            <?php for ($i = 1; $i <= $totalPages; $i++): ?>
                                <?php if ($i == $page): ?>
                                    <span class="current"><?php echo $i; ?></span>
                                <?php else: ?>
                                    <a href="?page=<?php echo $i; ?>"><?php echo $i; ?></a>
                                <?php endif; ?>
                            <?php endfor; ?>
                            
                            <?php if ($page < $totalPages): ?>
                                <a href="?page=<?php echo $page + 1; ?>">下一页</a>
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>
                <?php endif; ?>
            </main>
            
            <aside class="sidebar">
                <?php if (isLoggedIn()): ?>
                    <?php $currentUser = getCurrentUser(); ?>
                    <div class="user-info">
                        <h3>欢迎回来</h3>
                        <p>用户：<?php echo escape($currentUser['用户名']); ?></p>
                        <div class="user-actions">
                            <a href="admin/index.php" class="btn">管理后台</a>
                            <a href="admin/post.php" class="btn">发布文章</a>
                            <a href="logout.php" class="btn btn-secondary">退出登录</a>
                        </div>
                    </div>
                <?php else: ?>
                    <div class="user-info">
                        <h3>用户登录</h3>
                        <div class="user-actions">
                            <a href="login.php" class="btn">立即登录</a>
                            <a href="register.php" class="btn btn-secondary">注册账号</a>
                        </div>
                    </div>
                <?php endif; ?>
                
                <div class="stats">
                    <h3>网站统计</h3>
                    <div class="stats-grid">
                        <div class="stats-item">
                            <div class="stats-number"><?php echo getArticleCount(); ?></div>
                            <div class="stats-label">文章总数</div>
                        </div>
                        <div class="stats-item">
                            <div class="stats-number"><?php echo count(getAllCategories()); ?></div>
                            <div class="stats-label">分类数量</div>
                        </div>
                        <div class="stats-item">
                            <div class="stats-number"><?php echo count(getAllTags()); ?></div>
                            <div class="stats-label">标签数量</div>
                        </div>
                        <div class="stats-item">
                            <div class="stats-number">
                                <?php
                                // 获取统计数据
                                $stats = $blog->getStats();
                                echo $stats['total_users'] ?? 0;
                                ?>
                            </div>
                            <div class="stats-label">注册用户</div>
                        </div>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</body>
</html> 